<template>
  <view class="page-common-select">
    <view class="select-item-view" v-for="(item,index) in options" :key="index" @tap="check(item)">
      <checkbox v-if="multiple" :color="$clr" :checked="item.checked"/>
      <radio v-else :checked="item.checked" :color="$clr" style="margin-right: 20rpx"/>
      <view class="text-ellipsis-view" style="white-space: nowrap">
        {{ item[labelKey] }}
      </view>
      <view style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></view>
    </view>
    <view v-if="loading" style="text-align: center;">加载中...</view>
    <view class="foot-view">
      <view @tap="reset">重置</view>
      <view class="theme-bgcolor" @tap="sub">确认</view>
    </view>
  </view>
</template>

<script setup>
import {useRouter} from '@tarojs/taro'
import {computed, reactive, watch} from 'vue'
import {cloneDeep} from 'lodash'

definePageConfig({
  navigationBarTitleText: '选择'
})

const route = useRouter()
const pages = getCurrentPages()
const prevPage = getCurrentPages()[pages.length - 2]// 上一个页面

const rawOptions = prevPage.data.pageHandler.options
const labelKey = prevPage.data.pageHandler.labelKey
const multiple = prevPage.data.pageHandler.multiple
const submit = prevPage.data.pageHandler.submit
let value = prevPage.data.pageHandler.value
const loading = prevPage.data.pageHandler.loading

let options = reactive([])

initOptions()

watch(loading, (n) => {
  initOptions()
})

function initOptions() {
  options.splice(0, options.length)
  options.push(...cloneDeep(rawOptions.value))
  if (value || value === 0) {
    if (multiple) {
      value.forEach(i => {
        options[i].checked = true
      })
    } else {
      options[value].checked = true
    }
  }
}

function check(item) {
  const checked = !item.checked
  if (!multiple) {
    options.forEach(i => {
      if (i !== item) i.checked = false
    })
  }
  item.checked = checked
}

function reset() {
  options.forEach(i => i.checked = false)
}

function sub() {
  let value
  if (multiple) {
    value = []
    options.forEach((i, index) => {
      i.checked && (value.push(index))
    })
  } else {
    value = options.findIndex(i => i.checked)
    if (value === -1) value = ''
  }
  wx.navigateBack({delta: 1}).then(() => {
    submit(value)
  })
}
</script>

<style lang="scss">
.page-common-select {
  min-height: 100%;
  background-color: white;

  .select-item-view {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin: 0 20rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #D7DBDF;
    position: relative;
  }

  .select-item-view:last-child {
    border: none;
  }

  .foot-view {
    z-index: 2;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;

    view {
      border-top: 1rpx solid #e8e8e8;
      height: 100rpx;
      line-height: 100rpx;
      flex-grow: 1;
      font-size: 32rpx;
      text-align: center;
    }

    view:first-child {
      background-color: white;
    }

    view:last-child {
      color: white;
    }
  }
}

</style>
